<template>
  <!-- <el-splitter>
    <el-splitter-panel collapsible min="50">
      <div class="full grid-box">
        <div v-for="(option, componentName) in options" class="item-box" :class="{selected: current?.name === componentName}" @click="select(componentName, option)">
          <div class="flex-center">
            xxx
          </div>
          <div class="component-name flex-center">{{ componentName }}</div>
        </div>
      </div>
    </el-splitter-panel>
    <el-splitter-panel size="25%" collapsible min="50">
      <div class="full property-box">
        <div class="flex items-center pl5px bg-yellow">【{{current.value.label}}】属性</div>
        <div class="p5px">
          <PropsEditor v-if="current?.value.props" v-model="data" :columns="current.value.props" />
        </div>
      </div>
    </el-splitter-panel>
  </el-splitter> -->
</template>
<script setup lang="ts">
  // import { ElSplitter, ElSplitterPanel } from 'element-plus';
  // import { computed, ref, watch } from 'vue';
  // import PropsEditor from './PropsEditor.vue';
  // import { ComponentType } from '@/views/types';
  // import { currentNode } from '@/views/seed-dev';
  // import componentSchemas from '@/seed-application/components';

  // const componentType = computed((): ComponentType => {
  //   const nodeType = currentNode.value?.type
  //   if(!nodeType) return void 0

  //   switch(nodeType) {
  //     case 'app': return 'layout'
  //     default: return nodeType
  //   }
  // })

  // const data = ref({})
  // const options = computed(() => {
  //   if(!componentType.value) return {}

  //   return componentSchemas[componentType.value] || {}
  // })

  // const current = ref<{name: string, value: {label: string, comment: string, props: Record<string, any>}}>()
  // function select(name, value) {
  //   current.value = { name, value }
    
  //   if(!currentNode.value.component) currentNode.value.component = {component: name, componentProps: {}}
  // }

  // watch(() => data.value, (val) => currentNode.value.component.componentProps = val, {deep: true})
</script>
<style lang="less" scoped>
  .grid-box {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 400px;
    grid-auto-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 400px;
    gap: 15px;
  }
  .item-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 35px;
    border: 1px solid var(--el-border-color);
    cursor: pointer;
  }
  .component-name {
    border-top: 1px solid var(--el-border-color);
  }
  .selected {
    border: 1px solid var(--el-color-primary);
  }
  .property-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 35px minmax(0, 1fr);
  }
</style>